
<template>
  <h1>从store直接取 state</h1>
  <h2>年龄: {{user_store.age}}</h2>
  <h3>等级: {{user_store.level}}</h3>
  <h3>账号: {{user_store.account}}</h3>
  <h3>昵称: {{user_store.nickname}}</h3>
  <hr>
  <button @click="user_store.nickname += '大大'">点修改昵称</button>
  <button @click="user_store.account += '1111'">点修改账号</button>
  <button @click="user_store.age += 2">点修改年龄</button>
  <button @click="user_store.level += '1'">点修改等级</button>
  <hr>
  <h1>computed映射为计算属性</h1>
  <h2>年龄: {{user_age}}</h2>
  <button @click="user_age += 2">点修改年龄</button>
  <hr>
  <h1>storeToRefs解构响应式的store</h1>
  <h2>年龄: {{age}}</h2>
  <h3>等级: {{level}}</h3>
  <h3>账号: {{z_account}}</h3>
  <h3>昵称: {{z_nickname}}</h3>
  <button @click="z_nickname += '大大'">点修改昵称</button>
  <button @click="z_account += '1111'">点修改账号</button>
  <button @click="age += 2">点修改年龄</button>
  <button @click="level += '1'">点修改等级</button>
  <hr>
  <h1>$patch 替换多个状态值</h1>
  <button @click="changeMuchData">点我同时替换多个值</button>
  <button @click="changeResetData">点我重置数据</button>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useUserStore2 } from "../stores/useUserStore2";
import {computed} from "vue";

// 1.0 获取对象实例 这种是不可以修改的
let user_store = useUserStore2()

// 2.0 这种是不可以修改的
let user_age = computed(()=> user_store.age )

// 3.0 解构响应式的数据
let {
  age,
  level,
  account: z_account,// 别名
  nickname: z_nickname,
} = storeToRefs(user_store)

// 点击同时换多个值
// 可以调用 $patch 方法。它允许你用一个 state 的补丁对象在同一时间更改多个属性：
let changeMuchData = ()=>{
  user_store.$patch({
    age:15,
    nickname:'小亮'
  })
}
let changeResetData = () =>{
  user_store.$reset()
}
/*
* 报错了 Uncaught Error: 🍍: Store "user2" is built using the setup syntax and does not implement $reset().
* */

</script>
